/*
 * 头部公用组件
 * @param {*} children 中间部分的内容，可以是一个React节点，组件，也可以是单纯的文字
 * @param {*} leftContent 导航左边部分的内容，默认返回按钮
 * @param {*} rightContent 导航右边部分的内容，默认返回按钮
 * @param {*} onLeftPress 导航左边部分点击执行的方法
 * @param {*} onRightPress 导航右边部分点击执行的方法
 */
import React from 'react';
import Icon from 'react-native-vector-icons/icomoon';
import { Text, View, TouchableWithoutFeedback } from 'react-native';
import { createStyles } from '../utils/view';
import PropTypes from 'prop-types';
import { colors } from '../styles/basic';
import LinearGradient from 'react-native-linear-gradient';

class NormalHeader extends React.Component {

    static propTypes = {
      leftContent: PropTypes.any,
      rightContent: PropTypes.any,
      onLeftPress: PropTypes.func,
      onRightPress: PropTypes.func,
    }

    static defaultProps = {
      leftContent: undefined,
      rightContent: undefined,
      onLeftPress: () => {},
      onRightPress: () => {},
    }

    // 渲染导航栏中间部分内容
    renderContent() {
      let TextNode = null;
      React.Children.map(this.props.children, function (child) {
        switch (typeof child) {
          case 'object':
            TextNode = child;
            break;
          case 'string':
            TextNode = <Text style={styles.text}>{child}</Text>;
            break;
          default:
            return;
        }
      });
      return TextNode;
    }

    renderNavigation(node) {
      let content = null;
      switch (typeof node) {
        case 'object':
          content = node;
          break;
        case 'string':
          content = <Text style={styles.text}>{node}</Text>;
          break;
        default:
          return;
      }
      return content;
    }

    render() {
      const { leftContent, rightContent, onLeftPress, onRightPress } = this.props;
      return (
        <LinearGradient style={styles.head} colors={['#F8F1A1', '#FCE56B', '#C9A43C']} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} >
          <View style={styles.leftContent}>
            <TouchableWithoutFeedback onPress={() => {
              onLeftPress && onLeftPress();
            }}>
              <View>{this.renderNavigation(leftContent)}</View>
            </TouchableWithoutFeedback>
          </View>
          <View style={styles.centerContent}>{this.renderContent()}</View>
          <View style={styles.rightContent}>
            <TouchableWithoutFeedback onPress={() => {
              onRightPress && onRightPress();
            }}>
              <View>{this.renderNavigation(rightContent)}</View>
            </TouchableWithoutFeedback>
          </View>
        </LinearGradient>
      );
    }
}

const common = {
  flex: 1,
  justifyContent: 'center'
};

let styles = {
  head: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 35,
    height: 135,
  },
  text: {
    color: colors.Black,
    fontSize: 36,
    fontWeight: 'bold',
  },
  leftContent: {
    ...common,
    paddingLeft: 20,
    alignItems: 'flex-start'
  },
  centerContent: {
    ...common,
    alignItems: 'center'
  },
  rightContent: {
    ...common,
    paddingRight: 20,
    alignItems: 'flex-end'
  }
};

styles = createStyles(styles);

export default NormalHeader;